import React, {Component} from 'react';
import {Image, PixelRatio, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import {apis} from '../apis/';

import {setSpText2} from '../utils/ScreenUtil';
const scale = PixelRatio.getFontScale();

const styles = StyleSheet.create({
    bookItem: {flexDirection: 'row', paddingTop: 5, paddingBottom: 5, paddingLeft: 5, borderBottomWidth: 1, borderBottomColor: '#ccc',},
    bookCover: {width: setSpText2(84), height: setSpText2(120), marginRight: 15,},
    bookTitle: {fontSize: setSpText2(18), marginTop: 10,},
    bookAuthor: {fontSize: setSpText2(15), marginTop: 15,},
    bookSource: {fontSize: setSpText2(13), textAlign: 'right', marginTop: 20, marginRight: 10, color: '#6f6f6f'},
    bookBtn: {fontSize: setSpText2(13), textAlign: 'right', marginTop: 20, marginRight: 10, color: '#6f6f6f'},
});

export default class BookItem extends Component {
    render() {
        let {title, author, source, add = false} = this.props;
        let cn = apis[source] ? apis[source].name : '';
        return (
            <View style={styles.bookItem}>
                <Image
                    style={styles.bookCover}
                    // source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
                    source={require('../../assets/cover.png')}
                />
                <View style={{flex: 1,}}>
                    <Text style={styles.bookTitle}>{title}</Text>
                    <Text style={styles.bookAuthor}>{author}</Text>
                    <Text style={styles.bookSource}>{cn}</Text>
                    {add ? <TouchableOpacity
                        activeOpacity={0.7}
                        style={{position: 'absolute', right: 10, top: 30}}
                        onPress={() => {
                            alert('TODO');
                        }}
                    >
                        <Text style={{fontSize: 16}}>添加到书架</Text>
                    </TouchableOpacity> : null}
                </View>
            </View>
        );
    }
}
